<template>
  <div id="TimeOutsetting">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select
            v-model="formInline.type"
            placeholder="类型"
            style="padding: 0px 8px 0px 0px"
          >
            <el-option label="系统" value="0"></el-option>
            <el-option label="客户" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属客户" v-if="formInline.type == 1">
          <el-select
            v-model="formInline.type_id"
            filterable
            placeholder="所属客户"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in customerBoxData"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运产品类型" label-width="100px">
          <el-select
            v-model="formInline.product_type"
            filterable
            placeholder="承运产品类型"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in Typecarriage"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="thermometermonitorObjTwo()"
            >查询</el-button
          >
          <el-button type="primary" @click="replacement()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 0px 0px 10px 0px">
      <el-button type="primary" @click="newlyIncreased()">新增</el-button>
      <el-button type="primary" @click="thermomeDelete()">删除</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :max-height="maxheight"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template slot-scope="scope">
            {{ scope.row.type | nodeObj }}
          </template>
        </el-table-column>
        <el-table-column prop="type_id_name" label="客户名称" width="120">
        </el-table-column>
        <el-table-column prop="product_type_name" label="产品类型" width="120">
        </el-table-column>
        <el-table-column
          prop="collect_create"
          label="揽收多少天后创建"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="collect_create"
          label="揽收多少天后完成"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="dispatch_create"
          label="干线多少天后创建"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="dispatch_complete"
          label="干线多少天后到达"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="distribution"
          label="配送多少天后创建"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="sign" label="签收多少天后完成" width="120">
        </el-table-column>
        <el-table-column
          prop="receipt_create"
          label="回单多少天后创建"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="receipt_complete"
          label="回单多少天后完成"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="box_recycle_create"
          label="回箱多少天后创建"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="box_recycle_complete"
          label="回箱多少天后完成"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="creator_id_name" label="创建人" width="120">
        </el-table-column>
        <el-table-column prop="last_editor_id_name" label="编辑人" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'see')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              @click="handleClick(scope.row, 'edit')"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      style="margin: 10px 0px 0px 0px; display: flex; justify-content: flex-end"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ALLtotal"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog :title="tiletype" :visible.sync="dialogVisible" width="800px">
        <el-form
          :inline="true"
          :model="formdata"
          class="demo-form-inline"
          label-width="150px"
          :rules="rules"
          ref="ruleForm"
          :disabled="disabledTypeTwo"
        >
          <el-form-item label="类型">
            <el-select
              v-model="formdata.type"
              placeholder="类型"
              :disabled="disabledType"
            >
              <el-option label="系统" value="0"></el-option>
              <el-option label="客户" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属客户"
            v-if="formdata.type == 1"
            prop="type_id"
            label-width="140px"
          >
            <el-select
              v-model="formdata.type_id"
              filterable
              placeholder="所属客户"
              :disabled="disabledType"
            >
              <el-option
                v-for="(item, index) in customerBoxData"
                :key="index"
                :value="item.id + ''"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="承运产品类型"
            prop="product_type"
            label-width="140px"
          >
            <el-select
              v-model="formdata.product_type"
              filterable
              placeholder="承运产品类型"
              :disabled="disabledType"
            >
              <el-option
                v-for="(item, index) in Typecarriage"
                :key="index"
                :value="item.id + ''"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="揽收多少天后创建" prop="collect_create">
            <el-input
              v-model="formdata.collect_create"
              placeholder="揽收多少天后创建"
              type="number"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="揽收多少天后完成" prop="collect_complete">
            <el-input
              v-model="formdata.collect_complete"
              placeholder="揽收多少天后完成"
              type="number"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="干线多少天后创建" prop="dispatch_create">
            <el-input
              v-model="formdata.dispatch_create"
              type="number"
              placeholder="干线多少天后创建"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="干线多少天后到达" prop="dispatch_arrive">
            <el-input
              v-model="formdata.dispatch_complete"
              type="number"
              placeholder="干线多少天后到达"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="配送多少天后创建" prop="distribution_create">
            <el-input
              v-model="formdata.distribution"
              type="number"
              placeholder="配送多少天后创建"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="签收多少天后完成" prop="sign">
            <el-input
              v-model="formdata.sign"
              placeholder="签收多少天后完成"
              type="number"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="回单多少天后创建" prop="receipt_create">
            <el-input
              v-model="formdata.receipt_create"
              type="number"
              placeholder="回单多少天后创建"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="回单多少天后完成" prop="receipt_complete">
            <el-input
              v-model="formdata.receipt_complete"
              type="number"
              placeholder="回单多少天后完成"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="回箱多少天后创建" prop="box_recycle_create">
            <el-input
              v-model="formdata.box_recycle_create"
              type="number"
              placeholder="回箱多少天后创建"
              style="width: 110%"
            ></el-input>
          </el-form-item>
          <el-form-item label="回箱多少天后完成" prop="box_recycle_complete">
            <el-input
              v-model="formdata.box_recycle_complete"
              type="number"
              placeholder="回箱多少天后完成"
              style="width: 110%"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm', 0)"
            v-if="statetype == 'add'"
            >确 定</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('ruleForm', 1)"
            v-if="statetype == 'edit'"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  customerBox,
  overtimesettingcreate,
  overtimesettingList,
  overtimesettingdetail,
  overtimesettingupdate,
  overtimesettingdelete,
} from "@/api/Largewidthmeterlist";
import { getTransportsList } from "@/api/waybill";
export default {
  name: "TimeOutwarningList",
  data() {
    return {
      websiteList: [],
      formInline: {
        type: "", // 类型 0系统 1客户
        type_id: "", // 客户id
        product_type: "", // 承运产品类型id
      },
      tableData: [],
      maxheight: "auto",
      ALLtotal: 0,
      currentPage4: 1,
      page: 1,
      page_size: 20,
      customerBoxData: [], //所属客户
      Typecarriage: [],
      dialogVisible: false,
      tiletype: "超时配置",
      statetype: "",
      formdata: {
        id: "",
        type: "1", // 类型 0系统 1客户
        type_id: "", // 客户id
        product_type: "", //承运产品类型
        collect_create: "", // 揽收多少天后创建
        collect_complete: "", // 揽收多少天后完成
        dispatch_create: "", // 干线多少天后创建
        dispatch_complete: "", // 干线多少天后到达
        distribution: "", // 配送多少天后创建
        sign: "", // 签收多少天后完成
        receipt_create: "", // 回单多少天后创建
        receipt_complete: "", // 回单多少天后完成
        box_recycle_create: "", // 回箱多少天后创建
        box_recycle_complete: "", // 回箱多少天后完成
      },
      rules: {
        type_id: [{ required: true, message: "请输入客户", trigger: "change" }],
        product_type: [
          { required: true, message: "请输入承运产品类型", trigger: "change" },
        ],
        collect_create: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        collect_complete: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        dispatch_create: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        dispatch_complete: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        distribution: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        sign: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        receipt_create: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        receipt_complete: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        box_recycle_create: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
        box_recycle_complete: [
          {
            pattern: /^\d+(\.\d)?$/,
            message: "只允许保留一位小数例如1.1",
            trigger: "change",
          },
        ],
      },
      multipleSelection: [],
      disabledType: false,
      disabledTypeTwo: false,
    };
  },
  mounted() {
    // 获取所属客户
    this.customerBoxFn();
    // 承运产品类型
    this.productProduct();
    // 创建 列表入口
    this.thermometermonitorObj();
  },

  filters: {
    nodeObj(value, params) {
      switch (value) {
        case "0":
          return "系统";
        case "1":
          return "客户";
      }
    },
    statusObj(value) {},
  },
  methods: {
    async customerBoxFn() {
      let data = {
        name: "", //名称
        is_send: "1", //是否为客户 0不  1是客户
        is_receive: "", //是否收货单位  0不是  1是
      };
      var res = await customerBox(data).then((res) => {
        if (res.code === 10000) {
          this.customerBoxData = res.data;
        }
      });
    },
    async productProduct() {
      let result2 = await getTransportsList({ is_all: false });
      this.Typecarriage = result2.data.data;
    },
    thermometermonitorObj() {
      var param = {
        ...this.formInline,
      };
      overtimesettingList(param).then((res) => {
        this.tableData = res.data.data;
        if (this.tableData.length > 6) {
          //两排操作栏
          this.maxheight = document.documentElement.clientHeight - 265;
        } else {
          this.maxheight = "auto";
        }

        this.ALLtotal = res.data.pagination.total;
        this.page = res.data.pagination.page * 1;
        this.page_size = res.data.pagination.page_size * 1;
      });
    },
    newlyIncreased() {
      this.dialogVisible = true;
      this.tiletype = "新增超时配置";
      this.statetype = "add";
      this.disabledType = false;
      this.disabledTypeTwo = false;
      Object.assign(this.$data.formdata, this.$options.data().formdata);
    },
    submitForm(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (type == 0) {
            var param = {
              ...this.formdata,
              type_id: this.formdata.type != 0 ? this.formdata.type_id : "0",
            };
            overtimesettingcreate(param).then((res) => {
              if (res.code == 10000) {
                this.dialogVisible = false;
                this.open2("success", "创建超时规则成功");
                this.thermometermonitorObj();
              } else {
                this.open2("warning", res.message);
              }
            });
          } else if (type == 1) {
            var param = {
              ...this.formdata,
              type_id: this.formdata.type != 0 ? this.formdata.type_id : "0",
            };
            overtimesettingupdate(param).then((res) => {
              if (res.code == 10000) {
                this.dialogVisible = false;
                this.open2("success", "修改超时规则成功");
                this.thermometermonitorObj();
              } else {
                this.open2("warning", res.message);
              }
            });
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    handleClick(value, type) {
      // console.log(value, "valieajflka");
      var param = {
        id: value.id,
      };
      overtimesettingdetail(param).then((res) => {
        if (res.code == 10000) {
          this.formdata = { ...res.data };
          this.dialogVisible = true;
          if (type == "see") {
            this.tiletype = "超时配置详情";
            this.statetype = "";
            this.disabledTypeTwo = true;
          } else if (type == "edit") {
            this.tiletype = "编辑超时配置";
            this.statetype = "edit";
            this.disabledType = true;
            this.disabledTypeTwo = false;
          }
        }
      });
    },
    thermomeDelete() {
      var param = {
        id: this.multipleSelection[0].id,
      };
      overtimesettingdelete(param).then((res) => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.thermometermonitorObj();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.thermometermonitorObj();
      // console.log(`当前页: ${val}`);
    },
    replacement() {
      Object.assign(this.$data.formInline, this.$options.data().formInline);
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    thermometermonitorObjTwo() {
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    open2(type, title) {
      this.$message({
        message: title,
        type: type,
      });
    },
  },
};
</script>
<style scoped lang="less">
#TimeOutsetting {
  /* width: 100%; */
  background: #ffffff;
  padding: 10px 15px;
}
</style>